<template>
  <div class="container">
    <div class="form-list">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field label="所选行业" v-model="industry" readonly />
          <van-field
            v-model="phone"
            type="phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
            required
            @change="findUserInfo"
          />
          <van-field
            v-model="name"
            name="姓名"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请填写用户名' }]"
           
            required
          />
       
          <van-field
            v-model="village"
            name="所属村"
            label="所属村"
            placeholder="请输入您现在的所属村"
            :rules="[{ required: true, message: '请输入您现在的所属村' }]"
            required
          />
          <van-field
            v-model="dept"
            name="所在单位"
            label="所在单位"
            placeholder="请输入您现在所在单位"
            :rules="[{ required: true, message: '请输入您现在所在单位' }]"
            required
          />
        </van-cell-group>
        <div style="margin: 20px">
          <van-button round block type="primary" native-type="submit">
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
    <van-dialog
			v-model="show"
			title="提交完成"
			@confirm="handleConfirm()"
			
		>
		</van-dialog>
  </div>
  
</template>

<script>
import { getAxios3 } from "@/utils/request2";
export default {
  data() {
    return {
      industry: "", // 所选行业
      itemCode: '',
      info:'',
      name:'',
      phone:'',
      village:'',
      dept:'',
      show:false,
      title:"dfsdfsf"
    };
  },
  mounted() {
    // console.log(this.$route.query.item)
    this.industry = this.$route.query.title;
    this.itemCode = this.$route.query.itemCode
    // this.flag=this.$route.query.flag
  },
  methods: {
    onSubmit() {
        //验证名字的正则表达式
        const regName = /^[\u4E00-\u9FA5]{2,4}$/; 
        // 验证手机号的正则表达式
        var regPhone = /^1[3-9]\d{9}$/;
        if (!regName.test(this.name)){
            return this.$toast('请输入合法的姓名！')
        }
        if (!regPhone.test(this.phone)){
            return this.$toast('请输入合法的手机号！')
        }
        const userdata = {
          name: this.name,
          telNo: this.phone,
          village: this.village,
          workPlace: this.dept
        }
        this.saveStudyMsg(userdata)
        localStorage.setItem('userId', this.phone)

    },
    // 保存学习用户信息
    async saveStudyMsg(data){
      let axios2=await getAxios3()
      // const res = await this.$axios.post('http://120.79.234.223:8558/app/study/saveMember',data)
      
      const res = await axios2.post('https://qtbm.zatsafety.com/app/study/saveMember',data)
      console.log(res)
      if (res.msg === "success") {
        localStorage.setItem("FgbmName", this.name);
        let path
        // if(this.flag){
        //   path='/qtbm/info'
        // }else{
        
        //   path='/qtbm/video'
        // }
        // this.$router.push({path:path,query:{industryType: this.itemCode}})
        //isExamine: localStorage.getItem('isExamine') //是否需要考试 1考 0不考
        if(localStorage.getItem('isExamine')==1){
          this.show=true
        }else{
          this.$router.push({path:"/qtbm/video",query:{industryType: this.itemCode}})
        }
       
        
        
          
      }
    },
    handleConfirm(){
      this.$router.push({path: '/qtbm/btnList'})
    },
    async findUserInfo(){
      var self=this
      let axios2=await getAxios3()
      // let params = new FormData(); //创建form对象
      // params.append("params[memberId]", self.phone);
      const res = await axios2.post(`https://qtbm.zatsafety.com/app/study/memberList`, {'params[memberId]': self.phone})
      let data=res.data[0]
      if(data){
        self.name=data.memberName
        self.village=data.village
        self.dept=data.workPlace
      }else{
        self.name=''
      self.village=''
      self.dept=''
      } 
    }
  },
};
</script>

<style lang="less" scoped>
.container {
    .form-list {
        width: 90%;
        margin: 20px auto;
        height: 80vh;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 5px #ccc;
    }
}
</style>
